<template>
    <div class="hotGame">
        <div @click="goToCategory(name)" class="flex" style="cursor: pointer;align-items: center;">
            <span class="cardTitle">{{name}}</span>
            <img style="width: 20px;height: 20px;" v-if="showArrow" src="/chevron-right.png" alt="">
        </div>
        <div ref="scrollContainer" class="content-container" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
            <div class="items-container">
                <div v-for="(item) in list.slice(0, showItem)" class="item-wrapper">
                    <HotItem :isIndex="isIndex" @click="handleClick(item)" :item="item" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
  name:String,
  list:{
    type:Array,
    default:()=>[]
  },
  showArrow:{
    type:Boolean,
    default: true
  },
  showItem:{
    type:Number,
    default:8
  },
  isIndex:{
    type:Boolean,
    default:false
  }
})
const scrollContainer = ref(null);
const isDragging = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);
const handleClick = (item)=>{
  let url = (route.params.hasOwnProperty('language') ?  "/" + route.params.language : '') + `/android/${item.app_slug}`
  navigateTo(url)
}
console.log(props.isIndex);

const route = useRoute()
function transformString(str) {
  // 分割字符串为单词数组
  const words = str.split(' ');
  // 处理每个单词：首字母小写
  const processedWords = words.map(word => word.charAt(0).toLowerCase() + word.slice(1));
  // 使用短横线连接处理后的单词
  return processedWords.join('-');
}
const goToCategory = (item) => {
    
    if(props.isIndex){
        navigateTo(`/${props.name.includes('Games')? 'games' : 'apps'}`)
    }else{
      navigateTo(`/${route.fullPath.includes('/games') ? 'games' : 'apps'}/${transformString(item)}`)
    }
}
const handleMouseDown = (e) => {
  isDragging.value = true;
  startX.value = e.pageX - scrollContainer.value.offsetLeft;
  scrollLeft.value = scrollContainer.value.scrollLeft;
};

const handleMouseMove = (e) => {
  if (!isDragging.value) return;
  e.preventDefault();
  const x = e.pageX - scrollContainer.value.offsetLeft;
  const walk = (x - startX.value) * 2;
  scrollContainer.value.scrollLeft = scrollLeft.value - walk;
};

const handleMouseUp = () => {
  isDragging.value = false;
};

</script>
<style>
.hotGame {
    margin-bottom: 24px;
}

.content-container {
    user-select: none;
    overflow-x: auto;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    &:active {
        cursor: grabbing;
    }

    .items-container {
        display: flex;
        gap: 12px;
        padding: 0 1px;
        min-width: max-content;
    }

    .item-wrapper {
        flex: 0 0 calc(12.5% - 10.5px);
        min-width: 150px;
    }

    @media screen and (max-width: 1280px) {
        overflow-x: auto;
        overflow-y: hidden;

        /* 添加以下样式来美化滚动条 */
        &::-webkit-scrollbar {
            height: 6px;
            /* 滚动条高度 */
        }

        &::-webkit-scrollbar-track {
            background: #f1f1f1;
            /* 滚动条轨道颜色 */
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滚动条滑块颜色 */
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #555;
            /* 滚动条滑块悬停颜色 */
        }
    }


}

.cardTitle {
    color: var(--Text-Title, #3E4351);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.flex {
    display: flex;
}
</style>